<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="box">
    <div class="screen"></div>
    <div class="bottom_bar">
      <input type="text" placeholder="开始你的表演">
      <a href="javascript:;">发送</a>
    </div>
  </div>

  <script src="./js/jquery-3.6.0.js"></script>
  <script>

    // 如何得到 min ~ max 之间的随机数
    function random(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    }

    // console.log(random(20, 30));


    // 点击发送按钮
    //   --> 获取输入框的值，组装p标签
    //   --> 修改p标签样式（字体大小随机、颜色随机）
    //   --> 放到页面中指定的位置（右侧，盒子的外部  |  上下位置随机）
    //   --> 自定义动画（向左移动，移动到盒子之外的时候，移除它）

    $('.box a').on('click', function () {
      let val = $('.box input').val();
      // 组装p标签
      let p = $(`<p>${val}</p>`);
      // 设置p的样式
      p.css('font-size', random(12, 30) + 'px').css('color', `rgb(${random(0, 100)}, ${random(0, 100)}, ${random(0, 100)})`);
      // 把 p 放到页面中
      $('.screen').append(p);
      // p的高度，必须放到页面之后，才能获取
      // console.log(p.height());
      // p 上下的位置随机
      // p.css('top', random(0, box的高度 - 下边的高度 - p的高度));
      let t = $('.box').height() - $('.bottom_bar').outerHeight() - p.height();
      p.css('top', random(0, t) + 'px');

      // 给 p 加一个动画
      p.animate({ right: $('.box').width() + p.width() + 'px' }, 10000, 'linear', function () {
        $(this).remove();
      });
    })
  </script>
</body>

</html>